<template>
	<div class="admin-login_item3">
		<div class="login_item3-coter">
			<img class="coter-img" src="../../../../../static/img/loginBg.jpg" />
			<div class="coter-right">
				<div class="coter-right_box">
					<div class="right_box-t">{{themeRoute.name}}</div>
					<div class="right_box-ipt">
						<input v-model="user.username" class="ipt-li" placeholder="用户名" />
						<input v-model="user.password" class="ipt-li" type="password" placeholder="密码" />
					</div>
					<el-button class="coter-action" @click="subimt" :loading="loading">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			themeRoute: {}
		},
		data() {
			return {
				loading: false,
				logo: null,
				user: {
					username: '',
					password: ''
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.logo = await this.$api.configLogo()
			},
			async subimt() {
				this.loading = true
				await this.$ala.userLogin(this.user)
				this.loading = false
				await this.$emit('afterLogin')
			}
		}
	}
</script>
<style lang="scss">
	.admin-login_item3 {
		width: 100%;
		min-width: 1200px;
		height: 100%;
		min-height: 600px;
		background-color: #f6f9fd;

		.login_item3-coter {
			width: 1200px;
			background-color: #f6f9fd;
			margin: auto;
			display: flex;
			padding-top: 150px;

			.coter-img {
				width: 593px;
				height: 400px;
			}

			.coter-right {
				flex: 1;
				min-width: 0;

				.coter-right_box {
					width: 340px;
					margin-top: 70px;

					.right_box-t {
						font-size: 23px;
						color: #333;
					}

					.right_box-ipt {
						display: flex;
						flex-direction: column;
						margin-top: 30px;

						.ipt-li {
							margin-top: 10px;
							background-color: #ffffff;
							border: 1px solid #dfdfdf;
							height: 46px;
							line-height: 46px;
							padding: 0 20px;
							outline: none;
							font-size: 14px;
						}

						.ipt-li:focus {
							border: 1px solid #999;
						}
					}

					.coter-action {
						width: 100%;
						padding: 0;
						height: 46px;
						line-height: 46px;
						text-align: center;
						background-color: #2196f3;
						border-radius: 0;
						margin-top: 70px;

						span {
							font-size: 20px;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
</style>